<template>
  <div class="channel-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>频道详情</span>
          <el-button type="primary" @click="$router.back()">返回</el-button>
        </div>
      </template>
      
      <div class="channel-info">
        <el-descriptions title="频道信息" :column="2" border>
          <el-descriptions-item label="频道名称">{{ channel.name || '未知频道' }}</el-descriptions-item>
          <el-descriptions-item label="所属设备">{{ channel.deviceName || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="分辨率">{{ channel.resolution || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="帧率">{{ channel.frameRate || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="编码格式">{{ channel.codec || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="码率">{{ channel.bitrate || 'N/A' }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="channel.status === 'active' ? 'success' : 'danger'">
              {{ channel.status === 'active' ? '活跃' : '停用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ channel.createTime || 'N/A' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div class="channel-preview" v-if="channel.status === 'active'">
        <h3>实时预览</h3>
        <div class="video-container">
          <video 
            ref="videoRef" 
            controls 
            width="640" 
            height="480"
            poster="/placeholder-video.jpg"
          >
            您的浏览器不支持视频播放
          </video>
        </div>
        <div class="video-controls">
          <el-button @click="startPreview">开始预览</el-button>
          <el-button @click="stopPreview">停止预览</el-button>
          <el-button @click="takeSnapshot">截图</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const videoRef = ref(null)
const channel = ref({
  id: route.params.id,
  name: '主摄像头',
  deviceName: '前门摄像头',
  resolution: '1920x1080',
  frameRate: '25fps',
  codec: 'H.264',
  bitrate: '2Mbps',
  status: 'active',
  createTime: new Date().toLocaleString()
})

onMounted(() => {
  loadChannelDetail()
})

const loadChannelDetail = async () => {
  try {
    // TODO: 实现频道详情加载逻辑
    console.log('加载频道详情:', route.params.id)
  } catch (error) {
    ElMessage.error('加载频道详情失败')
  }
}

const startPreview = async () => {
  try {
    // TODO: 实现开始预览逻辑
    ElMessage.success('开始预览')
  } catch (error) {
    ElMessage.error('开始预览失败')
  }
}

const stopPreview = () => {
  try {
    // TODO: 实现停止预览逻辑
    if (videoRef.value) {
      videoRef.value.pause()
    }
    ElMessage.success('停止预览')
  } catch (error) {
    ElMessage.error('停止预览失败')
  }
}

const takeSnapshot = async () => {
  try {
    // TODO: 实现截图逻辑
    ElMessage.success('截图成功')
  } catch (error) {
    ElMessage.error('截图失败')
  }
}
</script>

<style scoped>
.channel-detail {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-info {
  margin-top: 20px;
}

.channel-preview {
  margin-top: 30px;
}

.video-container {
  margin: 20px 0;
  text-align: center;
}

.video-controls {
  text-align: center;
  margin-top: 10px;
}

.video-controls .el-button {
  margin: 0 5px;
}
</style>